<template>
    <div class="scroll-container" ref="scrollContainer">
        <div class="scroll-content">
            <!-- <img class="img" v-for="(item,index) in publicize_img" :key="index" :src="$baseUrl+item"> -->
            <el-image
                class="img"
                v-for="(item,index) in publicize_img"
                :key="index"
                :src="$baseUrl+item"
                :zoom-rate="1.2"
                :max-scale="5"
                :min-scale="0.2"
                :preview-src-list="img_list_fn(publicize_img)"
                fit="cover"
                :initial-index = "index"
                close-on-press-escape
            />
        </div>
    </div>
</template>

<script setup>
    import { onMounted,ref } from "vue"
    const scrollContainer = ref();

    defineProps(['publicize_img']);

    const img_list_fn = (list)=>{
        return list.map(item=>{
            return window.baseUrl+item
        })
    }

    onMounted(() => {
        const container = scrollContainer.value;
        const speed = 4

        container.addEventListener('wheel', (e) => {
            if (e.deltaY !== 0) {
                e.preventDefault();
                container.scrollBy({
                    left: e.deltaY * speed,
                    behavior: 'smooth'
                });
            }
        });
    });
</script>


<style lang="less" scoped>

.scroll-container {
    overflow-x: scroll;
    white-space: nowrap;
    background-color: #fff;
    padding: 10px;
    margin-top: 20px;
    scroll-behavior: smooth;
}

.scroll-content {
    display: inline-block;
}

.scroll-content .img {
    height: 300px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: top;
}
.scroll-container::-webkit-scrollbar {
    height: 8px;
}

.scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

// ::v-deep .el-image-viewer__img{
//     width: 80% !important;
//     height: auto !important;
// }
</style>